<template>
  <div class="login-container">
    <video
      data-v-73443695=""
      muted="muted"
      src="@/assets/video/bg.mp4"
      loop="loop"
      autoplay="autoplay"
      class="video"
    ></video>
    <el-form
      :model="loginForm"
      status-icon
      :rules="rules"
      ref="loginForm"
      label-width="100px"
      class="demo-loginForm"
    >
      <h1 class="title">千锋管理系统</h1>
      <i
        @click="changeLoginType"
        :class="['jiaobiao', 'iconfont', jiaobiaoType]"
      ></i>
      <!-- 常规登录 -->
      <CommonLogin
        v-if="loginType === 'common'"
        ref="commonLogin"
        @syncLoginForm="handleSyncLoginForm"
        @handleSmsType="changeSmsType"
        @submit="submit"
      ></CommonLogin>
      <!-- 二维码登录 -->
      <QrLogin
        v-else-if="loginType === 'qrcode'"
        :storageUserInfo="storageUserInfo"
      ></QrLogin>
      <!-- 短信验证码登录 -->
      <SmsLogin v-else :storageUserInfo="storageUserInfo"></SmsLogin>
    </el-form>
  </div>
</template>

<script>
import CommonLogin from "@/components/Login/commonLogin.vue";
import QrLogin from "@/components/Login/qrLogin.vue";
import SmsLogin from "@/components/Login/smsLogin.vue";
import * as api from "@/api/users";
import storage from "@/utils/storage";
//校验验证码
var validateCaptcha = (rule, value, callback) => {
  if (value.length === 5) {
    callback();
  } else {
    callback("验证码必须是5位");
  }
};
//校验用户名
var validateUsername = (rule, value, callback) => {
  var uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
  //如果校验通过，要直接回调callback()
  //如果校验不通过，callback中传参数
  if (uPattern.test(value)) {
    callback();
  } else {
    callback("请输入3-16位字母数字下划线");
  }
};
//校验密码
var validatePassword = (rule, value, callback) => {
  if (value.length >= 3) {
    callback();
  } else {
    callback("密码长度不能小于3位");
  }
};
export default {
  data() {
    return {
      //common常规登入，qrcode二维码，sms短信验证码
      loginType: "common", //登入方式
      loginForm: {
        username: "",
        password: "",
        captcha: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        captcha: [{ validator: validateCaptcha, trigger: "blur" }],
      },
    };
  },
  //计算属性
  computed: {
    jiaobiaoType() {
      if (this.loginType === "common") {
        return "icon-erweimajiaobiao";
      } else if (this.loginType == "qrcode" || this.loginType == "sms") {
        return "icon-diannaojiaobiao";
      }
    },
  },
  methods: {
    //更改成短信登入
    changeSmsType() {
      this.loginType = "sms";
    },
    //更改登入方式
    changeLoginType() {
      if (this.loginType === "common") {
        this.loginType = "qrcode";
      } else if (this.loginType == "qrcode" || this.loginType == "sms") {
        this.loginType = "common";
      }
    },
    handleSyncLoginForm(newLoginForm) {
      // console.log(newLoginForm);
      this.loginForm = newLoginForm;
    },
    submit() {
      this.$refs["loginForm"].validate((valid) => {
        if (valid) {
          //登入
          //1.获取后台的验证码
          //2.进行本地校验
          //3.本地校验通过=>先校验验证码
          //4.验证码通过再校验用户名和密码
          //5.成功和失败
          // 本地校验通过
          // alert("submit!");
          api.verifyCaptcha(this.loginForm.captcha).then(async (res) => {
            if (res.data.state) {
              //验证码通过，校验用户名和密码
              let { username, password } = this.loginForm;
              let res = await api.loginApi(username, password);
              console.log(res);
              //登入成功
              if (res.data.state) {
                //存储用户信息到本地
                this.storageUserInfo(res.data);
                //跳转到主页
                this.$router.push("/");
              }
            } else {
              //验证码不通过，刷新验证码
              this.$refs["commonLogin"].getCaptcha();
              console.log(res);
            }
          });
        } else {
          // 本地校验不通过
          console.log("error submit!!");
          return false;
        }
      });
    },
    //封装一个方法，用于存储用户的信息和token
    storageUserInfo({ userInfo, token, permission }) {
      //将信息存到vuex
      this.$store.commit("users/SET_USERINFO", userInfo);
      storage.set("qf-userInfo", userInfo);
      storage.set("qf-token", token);
      storage.set("qf-permission", permission);
    },
  },
  components: { CommonLogin, QrLogin, SmsLogin },
};
</script>
<style lang="less" scoped>
.login-container {
  text-align: center;
  color: #fff;
  .video {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
  .el-form {
    position: fixed;
    right: 10%;
    top: 25%;
    border-radius: 5px;
    width: 400px;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 100px 0 50px 0;
    .title {
      margin: 0 0 60px 0;
      text-align: center;
      color: #fff;
    }
    .jiaobiao {
      font-size: 60px;
      color: #fff;
      position: absolute;
      right: -1px;
      top: -1px;
      cursor: pointer;
      opacity: 0.7;
      height: 60px;
      width: 60px;
    }
  }
}
</style>
